<template>
  <view>
    <view>
      <view class="section_2 flex-row">
        <image class="image_3" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps3lmkdqde4x1iurmabt4oa8hlxtnmndhuf59f087f-3c18-45f2-89dc-ddfa4d925aeb"  @click="back"/>
        <view class="text_1">文件发起-模板</view>
      </view>
    </view>
    <view>
      <view class="section_3 flex-col">
        <view class="box_1 flex-col">
          <view class="text_2">文件名称</view>
          <view class="box_2 flex-col"></view>
          <view class="text-wrapper_1 flex-row ">
            <text class="text_3">文件名称</text>
            <text class="text_4">{{fileName}}</text>
          </view>
        </view>
        <view class="box_3 flex-col" :style="{height: heigth}">
          <view class="text-wrapper_2 flex-row">
            <text class="text_5">签约设置</text>
          </view>
          <view class="section_4 flex-row">
            <view class="box_4 flex-col"></view>
            <text class="text_6">签署方</text>
            <text class="text_7">顺序签</text>
            <image class="image_4" v-if="isObey" @click="isContrary()" referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqk0g0m3555q237gjv0l8r5mixhvh8x020038f8cc-62fd-4d64-bb16-d76eedfaa09a" />
            <image @click="isContrary()" class="image_4" v-else  referrerpolicy="no-referrer" src="/static/qx.png" />
          </view>
          <view class="section_5 ">


            <!-- 账号本人签署 -->
            <view class="image-text_1">
              <view class="group_2"></view>
              <text class="text-group_1">{{selfName}}</text>
            </view>
            
            <view class="image-text_1" v-for="(item,index) in signatory" :key="index">
              <view class="group_2" @longpress="removeUser(index)"></view>
              <text class="text-group_1">{{item.userName}}</text>
            </view>


            <view class="image-text_1">
              <view class="group_2  Image" @click="toAdd()">
                <image style="width: 30rpx;height: 30rpx;" src="../../static/add.png" mode=""></image>
              </view>
              <text class="text_9">添加</text>
            </view>
          </view>
        </view>
        <view class="box_6 flex-row" @click="signSeal()">
          <text class="text_10">设置签章位置</text>
          <view class="text-wrapper_4">
            <text class="text_11">已设置0个</text>
            <text class="text_12">&nbsp;&nbsp;&nbsp;&gt;</text>
          </view>
        </view>
        <view class="box_7 flex-row">
          <text class="text_13">签约链接时效</text>
          <view class="text-wrapper_5">
            <!-- <text class="text_14">2022-07-15&nbsp;&nbsp;17：15&nbsp;</text> -->
            <text class="text_14">{{date}}</text>
            <text class="text_15">&nbsp;&nbsp;&gt;</text>
          </view>
        </view>
        <view class="box_8 flex-col"></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isObey: true,
        signatory: [],
        token: {},
        file: {},
        dates:null,//当前时间戳
      }
    },
    mounted() {
      //存储添加签约方
      let signUserList = uni.getStorageSync('signUserList');
      if (!signUserList) {
        let dataList = []
        uni.setStorageSync('signUserList', dataList);
      } else {
        this.signatory = signUserList
      }
      this.signatory = signUserList
      //获取token信息
      const token = uni.getStorageSync("token");
      this.token = token
      //获取file信息
      const file = uni.getStorageSync("file");
      this.file = file
      //获取时间戳
      var dates = new Date();
      this.dates=dates
      console.log(this.dates)
    },
    methods: {
      back(){
        uni.redirectTo({
          url:'../temDetial/temDetial'
        })
      },
      isContrary(){
        this.isObey=!this.isObey
         this.signatory = this.signatory.reverse()
        uni.setStorageSync('signUserList', this.signatory);
      },
      signSeal() {
        uni.navigateTo({
          url: '../signSeal/signSeal',
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      toAdd() {
        uni.redirectTo({
          url: "/subpkg/signatory/signatory"
        })
      },
      removeUser(index) {
        uni.showModal({
          title: '提示',
          content: '是否删除',
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定');
              this.signatory.splice(index, 1) //删除
              uni.setStorageSync('signUserList', this.signatory); //存储

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    },
    computed: {
      //计算出添加高度
      heigth() {
        let index = this.signatory.length
        let num = parseInt((index + 1) / 6)
        return (num * 120 + 280) + 'rpx'
      },
      //计算出时间
      date(){
        if(!this.dates) return
        let str=this.dates+''
        return str.slice(10,24)
      },
      //计算出本人名字
      selfName(){
        let name=''
        if(!this.token.userName) return
        name=this.token.userName.slice(0,3)
        return name
      },
      //计算出文件名字
      fileName(){
        let name=''
        if(!this.file.fileName) return
        name=this.file.fileName.split('.')[0]
        return name
      }
    }
  }
</script>

<style scoped>
  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .justify-between {
    justify-content: space-between;
  }

  .text_1 {
    width: 148rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 304rpx 0 247rpx;
  }

  .section_2 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psvdkybwgzgg29f7azycpsx02hznybut4vqc4d95658-7ed2-4f11-b6d5-f6fb571e2ff0) 100% no-repeat;
    background-size: 100% 100%;
       position: sticky; // 设置定位效果为“吸顶”
        top: 0;// 吸顶的“位置”
        z-index: 999;// 提高层级，防止被轮播图覆盖

  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .section_3 {
    background-color: rgba(242, 242, 242, 1);
    width: 750rpx;
    height: 1246rpx;
  }

  .box_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    width: 750rpx;
    height: 196rpx;
    border: 2px solid rgba(255, 252, 250, 1);
    margin-top: 30rpx;
  }

  .text_2 {
    width: 110rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    margin: 52rpx 0 0 67rpx;
  }

  .box_2 {
    background-color: rgba(242, 242, 242, 1);
    width: 630rpx;
    height: 2rpx;
    margin: 19rpx 0 0 62rpx;
  }

  .text-wrapper_1 {
    width: 620rpx;
    height: 23rpx;
    margin: 15rpx 0 58rpx 70rpx;
    justify-content: space-between;
  }

  .text_3 {
    width: 94rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_4 {
    /* width: 75rpx; */
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 2rpx;
  }

  .box_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px 20px 20px 20px;
    /* height: 400rpx; */
    border: 2px solid rgba(255, 252, 250, 1);
    margin-top: 30rpx;
    width: 750rpx;
  }

  .text-wrapper_2 {
    width: 110rpx;
    height: 27rpx;
    margin: 27rpx 0 0 66rpx;
  }

  .text_5 {
    width: 110rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
  }

  .section_4 {
    width: 630rpx;
    height: 33rpx;
    margin: 29rpx 0 0 60rpx;
  }

  .box_4 {
    background-color: rgba(200, 165, 86, 1);
    border-radius: 50%;
    width: 12rpx;
    height: 12rpx;
    margin-top: 8rpx;
  }

  .text_6 {
    width: 70rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;

    margin: 1rpx 0 0 10rpx;
  }

  .text_7 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    margin: 0 0 0 400rpx;
  }

  .image_4 {
    width: 66rpx;
    height: 33rpx;
    margin-left: 16rpx;
  }

  .section_5 {
    display: flex;
    flex-wrap: wrap;
    width: 630rpx;
    height: 96rpx;
    margin: 31rpx 0 157rpx 83rpx;
  }

  .image-text_1 {
    width: 64rpx;
    height: 96rpx;
    margin-right: 40rpx;
    margin-bottom: 30rpx;
  }

  .group_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    width: 64rpx;
    height: 64rpx;
    border: 1px solid rgba(200, 165, 86, 1);
  }

  .Image {
    border: 4rpx solid #C8A556;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text-group_1 {
    width: 34rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 14rpx 0 0 15rpx;
  }



  .text-wrapper_3 {
    border-radius: 50%;
    height: 64rpx;
    border: 4px solid rgba(200, 165, 86, 1);
    width: 64rpx;
  }

  .text_8 {
    width: 30rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(200, 165, 86, 1);
    font-size: 54rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    margin: 10rpx 0 0 12rpx;
  }

  .text_9 {
    width: 35rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 14rpx 0 0 14rpx;
  }

  .box_6 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    height: 40px;
    border: 2px solid rgba(255, 252, 250, 1);
    margin: 30rpx 0 0 1rpx;
    padding: 0 20rpx 0 72rpx;
    align-items: center;
    justify-content: space-between;
  }

  .text_10 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
  }

  .text_11 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
  }

 

  .box_7 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    height: 80rpx;
    border: 2px solid rgba(255, 252, 250, 1);
    margin: 30rpx 0 0 1rpx;
    justify-content:space-between;
    align-items: center;
    padding: 0 20rpx 0 72rpx;
  }

  .text_13 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    
  }

  .text_14 {
    width: 193rpx;
    height: 16rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    text-align: left;
    white-space: nowrap;
  }



  .box_8 {
    background-color: rgba(242, 242, 242, 1);
    border-radius: 1px;
    width: 2rpx;
    height: 70rpx;
    margin: 271rpx 0 13rpx 374rpx;
  }
</style>
